<template>
  <van-popup position="top" :style="{ height: '70%' }" round v-model="show" :close-on-click-overlay="false">
    <div class="container">
      <div class="main">
        <van-form>
          <van-field label="消费时间:">
            <template #input>
              <div style="width: 100%;">
                <SelectTimeList @checkTimeList="checkTimeList" :listDate="[search.begin_time, search.end_time]" />
              </div>
            </template>
          </van-field>
          <van-field label="营业状态:">
            <template #input>
              <van-radio-group v-model="search.bus_state" direction="horizontal">
                <van-radio name="0">全部</van-radio>
                <van-radio name="1">营业</van-radio>
                <van-radio name="2">停业</van-radio>
              </van-radio-group>
            </template>
          </van-field>
          <van-field readonly clickable label="所属门店" :value="shopText" placeholder="请选择门店" @click="openShopPicker">
            <template #right-icon>
              <van-icon @click.stop="clearShop('shop')" name="close" />
            </template>
          </van-field>
          <van-field readonly clickable label="分公司" :value="componenyText" placeholder="请选择分公司"
            @click="openComponenyPicker">
            <template #right-icon>
              <van-icon @click.stop="clearShop('componeny')" name="close" />
            </template>
          </van-field>
          <van-field label="战区" placeholder="请选择战区" @click.stop="openZonePicker">
            <template #input>
              <MobileCheck ref='mobileCheckRef' :list="zoneList" :checkId="search.appoint_dept_id"
                @update:checkId="updateCheckId"
                :treePropsObj="{ children: 'children', hasChildren: true, id: 'dept_id', label: 'dept_name' }" />
            </template>
          </van-field>
        </van-form>
      </div>
      <div class="footer">
        <van-button size="small" type="default" @click="show = false">取消</van-button>
        <van-button size="small" type="info" @click="confirm">确认</van-button>
      </div>
    </div>
    <!-- 所属门店 -->
    <PopPickerSelectSearch ref="popPickerSelectSearchRef" placeholder="请输入门店名称" :list="shopList"
      @onConfirmShopList="onConfirmShopList" />
    <!-- 分公司 -->
    <PopPickerSelectSearch ref="openComponenyPickerRef" placeholder="请输入分公司名称" :list="componenyList"
      @onConfirmShopList="onConfirmComponenyList" />
  </van-popup>
</template>

<script>
import MobileCheck from "@/components/mobileCheck/index.vue"; //选择框
import SelectTimeList from "@/components/selectTimeList.vue";
import PopPickerSelectSearch from "./popPickerSelectSearch.vue";
export default {
  components: {
    SelectTimeList,
    PopPickerSelectSearch,
    MobileCheck
  },
  data() {
    return {
      show: false,
      search: {
        begin_time: "",
        end_time: "",
        biz_id: ""
      },
      shopText: "",
      componenyText: "",
      shopList: [], //门店列表
      searchKeyword: "",
      componenyList: [],
      zoneList: []
    };
  },
  created() { },

  methods: {
    open() {
      this.show = true;
    },
    setData(data) {
      this.search = data;
      let { biz_id, dept_id } = this.search;
      // 获取门店开始
      this.setShop(biz_id, dept_id);
      // 获取分公司
      this.getComonenyList(biz_id);
      // 获取战区
      this.getFirstZone(biz_id);
    },
    async getComonenyList(biz_id) {
      let res = await this.getBizRefCompany(biz_id);
      this.componenyList = res.map((ite, index) => ({
        text: ite.company_name,
        id: ite.company_id
      }));
    },
    // 设置店铺
    setShop(biz_id) {
      let ysShopList = this.getBizRefData(biz_id, "shop_childs");
      this.shopList = ysShopList
        .filter(v => v.bus_state == 1)
        .map((ite, index) => ({
          text: `${ite.dept_name} (${this.$constFilter(ite.ctype, "CTYPE_LIST")})`,
          id: ite.dept_id,
          dept_name: ite.dept_name,
          ctype: ite.ctype,
          defaultIndex: index
        }));
    },
    // 获取战区
    async getFirstZone(biz_id) {
      this.zoneList = await this.$service.dept.preDept({
        parent_id: 0,
        biz_id,
        post: 7
      });
      console.log('出发');

    },
    checkTimeList(timeList) {
      this.search.begin_time = timeList[0];
      this.search.end_time = timeList[1];
    },
    openShopPicker() {
      this.$refs.popPickerSelectSearchRef.open();
      this.$nextTick(() => {
        const selectedIndex = this.shopList.findIndex(
          item => item.id === this.search.dept_id
        );
        this.$refs.popPickerSelectSearchRef.setIndex(selectedIndex);
      });
    },
    openComponenyPicker() {
      this.$refs.openComponenyPickerRef.open();
      this.$nextTick(() => {
        const selectedIndex = this.shopList.findIndex(
          item => item.id === this.search.dept_id
        );
        this.$refs.openComponenyPickerRef.setIndex(selectedIndex);
      });
    },
    clearShop(type) {
      if (type == "shop") {
        this.search.dept_id = "";
        this.shopText = "";
      }
      if (type == "componeny") {
        this.search.company_id = "";
        this.componenyText = "";
      }
    },
    openZonePicker() {
      this.$refs.mobileCheckRef.openPop()
    },
    onConfirmShopList({ id, text }) {
      this.shopText = text;
      this.search.dept_id = id;
    },
    onConfirmComponenyList({ id, text }) {
      this.componenyText = text;
      this.search.company_id = id;
    },
    confirm() {
      this.$emit("resetSearch", this.search);
      this.show = false;
    },
    updateCheckId(val) {
      console.log(val, 'val');

      this.search.appoint_dept_id = val
    }
  }
};
</script>
<style scoped lang="scss">
.container {
  height: 100%;
  // padding: 20px;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;

  .main {
    flex: 1;
  }

  .footer {
    height: 50px;
    display: flex;
    padding: 0px 16px;
    justify-content: space-between;
    align-items: center;
  }
}
</style>
